<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>社交网站专题列表样式展示</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        :root {
            --primary-color: #4263eb;
            --secondary-color: #334195;
            --accent-color: #eef1ff;
            --light-color: #f8f9fa;
            --dark-color: #212529;
            --gray-color: #6c757d;
            --light-gray: #e9ecef;
            --success-color: #28a745;
            --like-color: #e74c3c;
            --bookmark-color: #f39c12;
            --transition: all 0.3s ease;
        }
        
        body {
            font-family: 'Inter', system-ui, -apple-system, sans-serif;
            background-color: #f8f9fa;
            color: var(--dark-color);
            line-height: 1.6;
            padding: 30px 0;
        }
        
        .container {
            max-width: 1200px;
        }
        
        .page-header {
            text-align: center;
            margin-bottom: 40px;
            padding-bottom: 20px;
            border-bottom: 1px solid var(--light-gray);
        }
        
        .page-header h1 {
            color: var(--primary-color);
            margin-bottom: 10px;
        }
        
        .list-example {
            background-color: #fff;
            border-radius: 10px;
            padding: 30px;
            margin-bottom: 40px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
        }
        
        .example-title {
            font-size: 1.5rem;
            margin-bottom: 25px;
            color: var(--primary-color);
            padding-bottom: 12px;
            border-bottom: 1px solid var(--light-gray);
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .example-description {
            color: var(--gray-color);
            margin-bottom: 25px;
            font-size: 0.95rem;
        }
        
        /* 专题卡片通用样式 */
        .topic-card {
            border-radius: 10px;
            overflow: hidden;
            transition: var(--transition);
            position: relative;
            background-color: #fff;
            border: 1px solid var(--light-gray);
        }
        
        .topic-card:not(:last-child) {
            margin-bottom: 20px;
        }
        
        .topic-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(0,0,0,0.08);
        }
        
        .topic-content {
            padding: 20px;
        }
        
        /* 专题标题样式 */
        .topic-title {
            font-size: 1.25rem;
            font-weight: 600;
            margin: 0 0 10px 0;
            color: var(--dark-color);
            transition: var(--transition);
        }
        
        .topic-card:hover .topic-title {
            color: var(--primary-color);
        }
        
        /* 专题描述样式 */
        .topic-description {
            color: var(--gray-color);
            margin-bottom: 15px;
            line-height: 1.6;
        }
        
        /* 专题标签样式 */
        .topic-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 15px;
        }
        
        .topic-tag {
            background-color: var(--accent-color);
            color: var(--primary-color);
            padding: 3px 10px;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 500;
        }
        
        /* 专题作者样式 */
        .topic-author {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 15px;
            font-size: 0.9rem;
        }
        
        .author-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid var(--light-gray);
        }
        
        .author-name {
            font-weight: 500;
        }
        
        .author-badge {
            color: #165DFF;
            font-size: 0.8rem;
        }
        
        .post-date {
            color: var(--gray-color);
            font-size: 0.85rem;
        }
        
        /* 专题统计数据样式 */
        .topic-stats {
            display: flex;
            gap: 20px;
            margin-bottom: 15px;
            font-size: 0.85rem;
            color: var(--gray-color);
        }
        
        .stat-item {
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .stat-item strong {
            color: var(--primary-color);
        }
        
        /* 专题图片样式 */
        .topic-images {
            margin-bottom: 15px;
            border-radius: 8px;
            overflow: hidden;
            position: relative;
        }
        
        .single-image {
            width: 100%;
            height: 200px;
            overflow: hidden;
        }
        
        .multiple-images {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 5px;
        }
        
        .multiple-images.three-images {
            grid-template-columns: repeat(2, 1fr);
        }
        
        .multiple-images.four-images {
            grid-template-columns: repeat(2, 1fr);
        }
        
        .image-item {
            width: 100%;
            height: 150px;
            overflow: hidden;
            position: relative;
        }
        
        .topic-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: var(--transition);
        }
        
        .topic-card:hover .topic-image {
            transform: scale(1.03);
        }
        
        .image-count-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0,0,0,0.5);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 500;
        }
        
        /* 操作按钮样式 */
        .topic-actions {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-top: 10px;
            border-top: 1px solid var(--light-gray);
        }
        
        .action-buttons {
            display: flex;
            gap: 15px;
        }
        
        .btn-icon {
            color: var(--gray-color);
            background: none;
            border: none;
            padding: 5px 10px;
            border-radius: 4px;
            display: flex;
            align-items: center;
            gap: 5px;
            cursor: pointer;
            transition: var(--transition);
            font-size: 0.9rem;
        }
        
        .btn-icon:hover {
            background-color: rgba(66, 99, 235, 0.1);
            color: var(--primary-color);
        }
        
        .btn-icon.liked {
            color: var(--like-color);
        }
        
        .btn-icon.bookmarked {
            color: var(--bookmark-color);
        }
        
        .btn-primary {
            background-color: var(--primary-color);
            color: white;
            border: none;
            padding: 6px 18px;
            border-radius: 6px;
            font-weight: 500;
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .btn-primary:hover {
            background-color: var(--secondary-color);
        }
        
        /* 列表布局样式 */
        .list-layout .topic-card {
            display: flex;
            flex-direction: column;
        }
        
        /* 大图布局样式 */
        .large-image-layout .topic-card {
            display: flex;
            flex-direction: column;
        }
        
        .large-image-layout .single-image {
            height: 300px;
        }
        
        /* 网格布局样式 */
        .grid-layout {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
            gap: 25px;
        }
        
        /* 社交卡片布局样式 */
        .social-card-layout .topic-card {
            border-radius: 15px;
            overflow: hidden;
        }
        
        .social-card-layout .topic-header {
            padding: 15px 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid var(--light-gray);
        }
        
        .social-card-layout .topic-actions {
            padding: 15px 20px;
            border-top: 1px solid var(--light-gray);
        }
        
        /* 紧凑布局样式 */
        .compact-layout .topic-card {
            padding: 15px;
        }
        
        .compact-layout .topic-description {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .compact-layout .topic-images .single-image {
            height: 140px;
        }
        
        .compact-layout .image-item {
            height: 100px;
        }
        
        /* 响应式调整 */
        @media (max-width: 768px) {
            .topic-actions, .action-buttons {
                flex-wrap: wrap;
                gap: 8px;
            }
            
            .large-image-layout .single-image {
                height: 200px;
            }
            
            .grid-layout {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="page-header">
            <h1>社交网站专题列表样式展示</h1>
            <p class="text-muted">展示不同风格的社交专题列表，支持无图和多图展示，融合社交互动功能</p>
        </div>
        
        <!-- 示例1：标准列表布局 -->
        <div class="list-example">
            <h3 class="example-title"><i class="fas fa-list"></i> 标准列表布局</h3>
            <p class="example-description">通用的列表布局，展示完整的专题信息，包含不同数量图片的展示方式</p>
            
            <div class="list-layout">
                <!-- 专题1：单张图片 -->
                <div class="topic-card">
                    <div class="topic-images">
                        <div class="single-image">
                            <img src="https://picsum.photos/1200/400?random=1" alt="城市摄影专题封面，展示现代都市天际线" class="topic-image">
                        </div>
                    </div>
                    
                    <div class="topic-content">
                        <h3 class="topic-title">城市建筑摄影指南：捕捉都市之美</h3>
                        
                        <div class="topic-description">
                            本专题将分享城市建筑摄影的技巧与心得，从构图到光线，从器材选择到后期处理，帮助你捕捉都市建筑的独特魅力。无论是现代摩天大楼还是历史建筑，都能找到适合的拍摄方法。
                        </div>
                        
                        <div class="topic-tags">
                            <span class="topic-tag">摄影</span>
                            <span class="topic-tag">城市</span>
                            <span class="topic-tag">建筑</span>
                            <span class="topic-tag">技巧</span>
                        </div>
                        
                        <div class="topic-author">
                            <img src="https://picsum.photos/100/100?random=101" alt="摄影爱好者头像" class="author-avatar">
                            <div>
                                <div>
                                    <span class="author-name">光影行者</span>
                                    <span class="author-badge"><i class="fas fa-check-circle"></i> 摄影达人</span>
                                </div>
                                <span class="post-date">发布于 3天前</span>
                            </div>
                        </div>
                        
                        <div class="topic-stats">
                            <div class="stat-item">
                                <i class="far fa-eye"></i>
                                <span>浏览 <strong>2.4k</strong></span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-comment"></i>
                                <span>评论 <strong>86</strong></span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-bookmark"></i>
                                <span>收藏 <strong>324</strong></span>
                            </div>
                        </div>
                        
                        <div class="topic-actions">
                            <div class="action-buttons">
                                <button class="btn-icon liked">
                                    <i class="fas fa-heart"></i>
                                    <span>156</span>
                                </button>
                                <button class="btn-icon">
                                    <i class="far fa-comment"></i>
                                    <span>评论</span>
                                </button>
                                <button class="btn-icon bookmarked">
                                    <i class="fas fa-bookmark"></i>
                                    <span>收藏</span>
                                </button>
                                <button class="btn-icon">
                                    <i class="far fa-share-square"></i>
                                    <span>分享</span>
                                </button>
                            </div>
                            
                            <button class="btn-primary">
                                <i class="fas fa-arrow-right"></i>
                                <span>查看专题</span>
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- 专题2：多张图片（3张） -->
                <div class="topic-card">
                    <div class="topic-images">
                        <div class="multiple-images three-images">
                            <div class="image-item">
                                <img src="https://picsum.photos/600/400?random=2" alt="意大利美食：披萨制作过程" class="topic-image">
                            </div>
                            <div class="image-item">
                                <img src="https://picsum.photos/600/400?random=3" alt="意大利美食：手工意面" class="topic-image">
                            </div>
                            <div class="image-item">
                                <img src="https://picsum.photos/600/400?random=4" alt="意大利美食：提拉米苏甜点" class="topic-image">
                            </div>
                        </div>
                    </div>
                    
                    <div class="topic-content">
                        <h3 class="topic-title">意大利美食之旅：从北到南的味觉探索</h3>
                        
                        <div class="topic-description">
                            跟随本专题一起探索意大利各地的特色美食，从北部的奶油烩饭到南部的海鲜意面，从手工披萨到传统甜点，全方位了解意大利美食文化的多样性和独特魅力。
                        </div>
                        
                        <div class="topic-tags">
                            <span class="topic-tag">美食</span>
                            <span class="topic-tag">意大利</span>
                            <span class="topic-tag">旅行</span>
                            <span class="topic-tag">烹饪</span>
                        </div>
                        
                        <div class="topic-author">
                            <img src="https://picsum.photos/100/100?random=102" alt="美食博主头像" class="author-avatar">
                            <div>
                                <div>
                                    <span class="author-name">味蕾旅行者</span>
                                    <span class="author-badge"><i class="fas fa-check-circle"></i> 美食达人</span>
                                </div>
                                <span class="post-date">发布于 1周前</span>
                            </div>
                        </div>
                        
                        <div class="topic-stats">
                            <div class="stat-item">
                                <i class="far fa-eye"></i>
                                <span>浏览 <strong>5.7k</strong></span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-comment"></i>
                                <span>评论 <strong>215</strong></span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-bookmark"></i>
                                <span>收藏 <strong>876</strong></span>
                            </div>
                        </div>
                        
                        <div class="topic-actions">
                            <div class="action-buttons">
                                <button class="btn-icon">
                                    <i class="far fa-heart"></i>
                                    <span>423</span>
                                </button>
                                <button class="btn-icon">
                                    <i class="far fa-comment"></i>
                                    <span>评论</span>
                                </button>
                                <button class="btn-icon">
                                    <i class="far fa-bookmark"></i>
                                    <span>收藏</span>
                                </button>
                                <button class="btn-icon">
                                    <i class="far fa-share-square"></i>
                                    <span>分享</span>
                                </button>
                            </div>
                            
                            <button class="btn-primary">
                                <i class="fas fa-arrow-right"></i>
                                <span>查看专题</span>
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- 专题3：无图片 -->
                <div class="topic-card">
                    <div class="topic-content">
                        <h3 class="topic-title">2023年度最佳科幻小说推荐榜单</h3>
                        
                        <div class="topic-description">
                            本专题整理了2023年度最值得一读的科幻小说，涵盖太空探索、人工智能、时间旅行等多个主题。每部作品都附有简短评论和推荐理由，帮助科幻爱好者找到适合自己的读物。从硬科幻到软科幻，从长篇巨著到短篇集，满足不同读者的需求。
                        </div>
                        
                        <div class="topic-tags">
                            <span class="topic-tag">科幻</span>
                            <span class="topic-tag">书籍</span>
                            <span class="topic-tag">推荐</span>
                            <span class="topic-tag">文学</span>
                        </div>
                        
                        <div class="topic-author">
                            <img src="https://picsum.photos/100/100?random=103" alt="书评人头像" class="author-avatar">
                            <div>
                                <div>
                                    <span class="author-name">书海漫游者</span>
                                    <span class="author-badge"><i class="fas fa-check-circle"></i> 文学评论家</span>
                                </div>
                                <span class="post-date">发布于 2周前</span>
                            </div>
                        </div>
                        
                        <div class="topic-stats">
                            <div class="stat-item">
                                <i class="far fa-eye"></i>
                                <span>浏览 <strong>3.1k</strong></span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-comment"></i>
                                <span>评论 <strong>156</strong></span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-bookmark"></i>
                                <span>收藏 <strong>632</strong></span>
                            </div>
                        </div>
                        
                        <div class="topic-actions">
                            <div class="action-buttons">
                                <button class="btn-icon liked">
                                    <i class="fas fa-heart"></i>
                                    <span>289</span>
                                </button>
                                <button class="btn-icon">
                                    <i class="far fa-comment"></i>
                                    <span>评论</span>
                                </button>
                                <button class="btn-icon">
                                    <i class="far fa-bookmark"></i>
                                    <span>收藏</span>
                                </button>
                                <button class="btn-icon">
                                    <i class="far fa-share-square"></i>
                                    <span>分享</span>
                                </button>
                            </div>
                            
                            <button class="btn-primary">
                                <i class="fas fa-arrow-right"></i>
                                <span>查看专题</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 示例2：大图布局 -->
        <div class="list-example">
            <h3 class="example-title"><i class="fas fa-image"></i> 大图布局专题</h3>
            <p class="example-description">突出图片展示的布局，适合摄影、设计等视觉性较强的专题内容</p>
            
            <div class="large-image-layout">
                <!-- 专题1：单张大图 -->
                <div class="topic-card">
                    <div class="topic-images">
                        <div class="single-image">
                            <img src="https://picsum.photos/1200/500?random=5" alt="自然风光摄影：高山湖泊全景" class="topic-image">
                        </div>
                    </div>
                    
                    <div class="topic-content">
                        <h3 class="topic-title">世界绝美自然景观：一生必去的50个地方</h3>
                        
                        <div class="topic-description">
                            从壮丽的山脉到神秘的雨林，从浩瀚的沙漠到晶莹的冰川，本专题带您领略地球上最令人惊叹的自然景观。每个地点都配有高清摄影作品和详细介绍，让您足不出户就能环游世界美景。
                        </div>
                        
                        <div class="topic-tags">
                            <span class="topic-tag">自然</span>
                            <span class="topic-tag">旅行</span>
                            <span class="topic-tag">摄影</span>
                            <span class="topic-tag">风景</span>
                        </div>
                        
                        <div class="topic-author">
                            <img src="https://picsum.photos/100/100?random=104" alt="旅行摄影师头像" class="author-avatar">
                            <div>
                                <div>
                                    <span class="author-name">环球视野</span>
                                    <span class="author-badge"><i class="fas fa-check-circle"></i> 旅行摄影师</span>
                                </div>
                                <span class="post-date">发布于 1个月前</span>
                            </div>
                        </div>
                        
                        <div class="topic-stats">
                            <div class="stat-item">
                                <i class="far fa-eye"></i>
                                <span>浏览 <strong>12.8k</strong></span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-comment"></i>
                                <span>评论 <strong>532</strong></span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-bookmark"></i>
                                <span>收藏 <strong>2.4k</strong></span>
                            </div>
                        </div>
                        
                        <div class="topic-actions">
                            <div class="action-buttons">
                                <button class="btn-icon liked">
                                    <i class="fas fa-heart"></i>
                                    <span>1.8k</span>
                                </button>
                                <button class="btn-icon">
                                    <i class="far fa-comment"></i>
                                    <span>评论</span>
                                </button>
                                <button class="btn-icon bookmarked">
                                    <i class="fas fa-bookmark"></i>
                                    <span>收藏</span>
                                </button>
                                <button class="btn-icon">
                                    <i class="far fa-share-square"></i>
                                    <span>分享</span>
                                </button>
                            </div>
                            
                            <button class="btn-primary">
                                <i class="fas fa-arrow-right"></i>
                                <span>查看专题</span>
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- 专题2：多张图片（4张） -->
                <div class="topic-card">
                    <div class="topic-images">
                        <div class="multiple-images four-images">
                            <div class="image-item">
                                <img src="https://picsum.photos/600/400?random=6" alt="街头时尚：春季穿搭" class="topic-image">
                            </div>
                            <div class="image-item">
                                <img src="https://picsum.photos/600/400?random=7" alt="街头时尚：夏季穿搭" class="topic-image">
                            </div>
                            <div class="image-item">
                                <img src="https://picsum.photos/600/400?random=8" alt="街头时尚：秋季穿搭" class="topic-image">
                            </div>
                            <div class="image-item">
                                <img src="https://picsum.photos/600/400?random=9" alt="街头时尚：冬季穿搭" class="topic-image">
                            </div>
                        </div>
                    </div>
                    
                    <div class="topic-content">
                        <h3 class="topic-title">四季街头时尚：普通人的穿搭灵感</h3>
                        
                        <div class="topic-description">
                            本专题收集了全球各大城市的街头时尚照片，展示普通人的日常穿搭。从春季的轻盈到冬季的厚重，从休闲风格到商务休闲，为不同季节和场合提供实用的穿搭参考。每个造型都附有搭配技巧和单品推荐。
                        </div>
                        
                        <div class="topic-tags">
                            <span class="topic-tag">时尚</span>
                            <span class="topic-tag">穿搭</span>
                            <span class="topic-tag">街头风格</span>
                            <span class="topic-tag">四季</span>
                        </div>
                        
                        <div class="topic-author">
                            <img src="https://picsum.photos/100/100?random=105" alt="时尚博主头像" class="author-avatar">
                            <div>
                                <div>
                                    <span class="author-name">时尚观察员</span>
                                    <span class="author-badge"><i class="fas fa-check-circle"></i> 时尚达人</span>
                                </div>
                                <span class="post-date">发布于 3周前</span>
                            </div>
                        </div>
                        
                        <div class="topic-stats">
                            <div class="stat-item">
                                <i class="far fa-eye"></i>
                                <span>浏览 <strong>8.6k</strong></span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-comment"></i>
                                <span>评论 <strong>328</strong></span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-bookmark"></i>
                                <span>收藏 <strong>1.5k</strong></span>
                            </div>
                        </div>
                        
                        <div class="topic-actions">
                            <div class="action-buttons">
                                <button class="btn-icon">
                                    <i class="far fa-heart"></i>
                                    <span>956</span>
                                </button>
                                <button class="btn-icon">
                                    <i class="far fa-comment"></i>
                                    <span>评论</span>
                                </button>
                                <button class="btn-icon">
                                    <i class="far fa-bookmark"></i>
                                    <span>收藏</span>
                                </button>
                                <button class="btn-icon">
                                    <i class="far fa-share-square"></i>
                                    <span>分享</span>
                                </button>
                            </div>
                            
                            <button class="btn-primary">
                                <i class="fas fa-arrow-right"></i>
                                <span>查看专题</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 示例3：网格布局 -->
        <div class="list-example">
            <h3 class="example-title"><i class="fas fa-th"></i> 网格布局专题</h3>
            <p class="example-description">紧凑的网格布局，适合展示大量专题内容，高效利用空间</p>
            
            <div class="grid-layout">
                <!-- 专题1：单张图片 -->
                <div class="topic-card">
                    <div class="topic-images">
                        <div class="single-image">
                            <img src="https://picsum.photos/600/400?random=10" alt="咖啡制作专题封面" class="topic-image">
                        </div>
                    </div>
                    
                    <div class="topic-content">
                        <h3 class="topic-title">精品咖啡入门指南</h3>
                        
                        <div class="topic-description">
                            从咖啡豆种类到冲泡方法，全面了解精品咖啡的世界，在家也能制作专业级咖啡。
                        </div>
                        
                        <div class="topic-tags">
                            <span class="topic-tag">咖啡</span>
                            <span class="topic-tag">饮品</span>
                            <span class="topic-tag">生活</span>
                        </div>
                        
                        <div class="topic-author">
                            <img src="https://picsum.photos/100/100?random=106" alt="咖啡师头像" class="author-avatar">
                            <div>
                                <span class="author-name">咖啡控</span>
                                <span class="post-date">1周前</span>
                            </div>
                        </div>
                        
                        <div class="topic-stats">
                            <div class="stat-item">
                                <i class="far fa-eye"></i>
                                <span>1.2k</span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-comment"></i>
                                <span>45</span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-heart"></i>
                                <span>89</span>
                            </div>
                        </div>
                        
                        <div class="topic-actions">
                            <button class="btn-primary">
                                <span>查看</span>
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- 专题2：多张图片 -->
                <div class="topic-card">
                    <div class="topic-images">
                        <div class="multiple-images three-images">
                            <div class="image-item">
                                <img src="https://picsum.photos/600/400?random=11" alt="室内植物：多肉植物" class="topic-image">
                            </div>
                            <div class="image-item">
                                <img src="https://picsum.photos/600/400?random=12" alt="室内植物：绿萝" class="topic-image">
                            </div>
                            <div class="image-item">
                                <img src="https://picsum.photos/600/400?random=13" alt="室内植物：龟背竹" class="topic-image">
                            </div>
                        </div>
                    </div>
                    
                    <div class="topic-content">
                        <h3 class="topic-title">适合新手的室内植物推荐</h3>
                        
                        <div class="topic-description">
                            10种容易养护的室内植物，净化空气同时美化家居环境，新手也能轻松驾驭。
                        </div>
                        
                        <div class="topic-tags">
                            <span class="topic-tag">植物</span>
                            <span class="topic-tag">家居</span>
                            <span class="topic-tag">生活</span>
                        </div>
                        
                        <div class="topic-author">
                            <img src="https://picsum.photos/100/100?random=107" alt="植物爱好者头像" class="author-avatar">
                            <div>
                                <span class="author-name">绿植控</span>
                                <span class="post-date">2周前</span>
                            </div>
                        </div>
                        
                        <div class="topic-stats">
                            <div class="stat-item">
                                <i class="far fa-eye"></i>
                                <span>2.5k</span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-comment"></i>
                                <span>124</span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-heart"></i>
                                <span>321</span>
                            </div>
                        </div>
                        
                        <div class="topic-actions">
                            <button class="btn-primary">
                                <span>查看</span>
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- 专题3：无图片 -->
                <div class="topic-card">
                    <div class="topic-content">
                        <h3 class="topic-title">高效时间管理的7个实用技巧</h3>
                        
                        <div class="topic-description">
                            简单有效的时间管理方法，帮助你提高工作效率，平衡工作与生活。
                        </div>
                        
                        <div class="topic-tags">
                            <span class="topic-tag">效率</span>
                            <span class="topic-tag">职场</span>
                            <span class="topic-tag">生活</span>
                        </div>
                        
                        <div class="topic-author">
                            <img src="https://picsum.photos/100/100?random=108" alt="效率专家头像" class="author-avatar">
                            <div>
                                <span class="author-name">效率达人</span>
                                <span class="post-date">3周前</span>
                            </div>
                        </div>
                        
                        <div class="topic-stats">
                            <div class="stat-item">
                                <i class="far fa-eye"></i>
                                <span>3.8k</span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-comment"></i>
                                <span>215</span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-heart"></i>
                                <span>567</span>
                            </div>
                        </div>
                        
                        <div class="topic-actions">
                            <button class="btn-primary">
                                <span>查看</span>
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- 专题4：单张图片 -->
                <div class="topic-card">
                    <div class="topic-images">
                        <div class="single-image">
                            <img src="https://picsum.photos/600/400?random=14" alt="瑜伽练习专题封面" class="topic-image">
                        </div>
                    </div>
                    
                    <div class="topic-content">
                        <h3 class="topic-title">办公室瑜伽：缓解久坐疲劳</h3>
                        
                        <div class="topic-description">
                            适合在办公室练习的简单瑜伽动作，缓解颈椎、腰椎压力，提高工作状态。
                        </div>
                        
                        <div class="topic-tags">
                            <span class="topic-tag">瑜伽</span>
                            <span class="topic-tag">健康</span>
                            <span class="topic-tag">职场</span>
                        </div>
                        
                        <div class="topic-author">
                            <img src="https://picsum.photos/100/100?random=109" alt="瑜伽教练头像" class="author-avatar">
                            <div>
                                <span class="author-name">瑜伽老师</span>
                                <span class="post-date">1个月前</span>
                            </div>
                        </div>
                        
                        <div class="topic-stats">
                            <div class="stat-item">
                                <i class="far fa-eye"></i>
                                <span>4.2k</span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-comment"></i>
                                <span>187</span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-heart"></i>
                                <span>632</span>
                            </div>
                        </div>
                        
                        <div class="topic-actions">
                            <button class="btn-primary">
                                <span>查看</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 示例4：社交卡片布局 -->
        <div class="list-example">
            <h3 class="example-title"><i class="fas fa-users"></i> 社交卡片布局专题</h3>
            <p class="example-description">强调社交互动的卡片式布局，适合社区型社交平台</p>
            
            <div class="social-card-layout">
                <!-- 专题1：单张图片 -->
                <div class="topic-card">
                    <div class="topic-header">
                        <div class="topic-author">
                            <img src="https://picsum.photos/100/100?random=110" alt="音乐爱好者头像" class="author-avatar">
                            <div>
                                <span class="author-name">音乐探索者</span>
                                <span class="author-badge"><i class="fas fa-check-circle"></i> 音乐达人</span>
                            </div>
                        </div>
                        <span class="post-date">2天前</span>
                    </div>
                    
                    <div class="topic-images">
                        <div class="single-image">
                            <img src="https://picsum.photos/1200/400?random=15" alt="独立音乐专题封面" class="topic-image">
                        </div>
                    </div>
                    
                    <div class="topic-content">
                        <h3 class="topic-title">2023年不容错过的独立音乐人</h3>
                        
                        <div class="topic-description">
                            本专题介绍了今年崭露头角的10位独立音乐人，从民谣到电子，从摇滚到爵士，多样化的音乐风格满足不同听众的需求。每位音乐人都附有代表作品推荐和创作故事。
                        </div>
                        
                        <div class="topic-tags">
                            <span class="topic-tag">音乐</span>
                            <span class="topic-tag">独立音乐</span>
                            <span class="topic-tag">推荐</span>
                        </div>
                    </div>
                    
                    <div class="topic-stats">
                        <div class="stat-item">
                            <i class="far fa-comment"></i>
                            <span><strong>98</strong> 条评论</span>
                        </div>
                        <div class="stat-item">
                            <i class="far fa-share-square"></i>
                            <span><strong>45</strong> 次分享</span>
                        </div>
                    </div>
                    
                    <div class="topic-actions">
                        <div class="action-buttons">
                            <button class="btn-icon liked">
                                <i class="fas fa-heart"></i>
                                <span>234</span>
                            </button>
                            <button class="btn-icon">
                                <i class="far fa-comment"></i>
                                <span>评论</span>
                            </button>
                            <button class="btn-icon">
                                <i class="far fa-share-square"></i>
                                <span>分享</span>
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- 专题2：无图片 -->
                <div class="topic-card">
                    <div class="topic-header">
                        <div class="topic-author">
                            <img src="https://picsum.photos/100/100?random=111" alt="电影评论家头像" class="author-avatar">
                            <div>
                                <span class="author-name">电影迷</span>
                                <span class="author-badge"><i class="fas fa-check-circle"></i> 影评人</span>
                            </div>
                        </div>
                        <span class="post-date">5天前</span>
                    </div>
                    
                    <div class="topic-content">
                        <h3 class="topic-title">被忽视的经典：十部值得重温的老电影</h3>
                        
                        <div class="topic-description">
                            这些电影可能不是票房大片，但却在电影史上有着重要地位。从黑白默片到彩色经典，每部电影都代表了一个时代的电影艺术成就，值得当代观众细细品味。
                        </div>
                        
                        <div class="topic-tags">
                            <span class="topic-tag">电影</span>
                            <span class="topic-tag">经典</span>
                            <span class="topic-tag">推荐</span>
                        </div>
                    </div>
                    
                    <div class="topic-stats">
                        <div class="stat-item">
                            <i class="far fa-comment"></i>
                            <span><strong>156</strong> 条评论</span>
                        </div>
                        <div class="stat-item">
                            <i class="far fa-share-square"></i>
                            <span><strong>87</strong> 次分享</span>
                        </div>
                    </div>
                    
                    <div class="topic-actions">
                        <div class="action-buttons">
                            <button class="btn-icon">
                                <i class="far fa-heart"></i>
                                <span>321</span>
                            </button>
                            <button class="btn-icon">
                                <i class="far fa-comment"></i>
                                <span>评论</span>
                            </button>
                            <button class="btn-icon">
                                <i class="far fa-share-square"></i>
                                <span>分享</span>
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- 专题3：多张图片 -->
                <div class="topic-card">
                    <div class="topic-header">
                        <div class="topic-author">
                            <img src="https://picsum.photos/100/100?random=112" alt="游戏玩家头像" class="author-avatar">
                            <div>
                                <span class="author-name">游戏达人</span>
                                <span class="author-badge"><i class="fas fa-check-circle"></i> 游戏测评师</span>
                            </div>
                        </div>
                        <span class="post-date">1周前</span>
                    </div>
                    
                    <div class="topic-images">
                        <div class="multiple-images three-images">
                            <div class="image-item">
                                <img src="https://picsum.photos/600/400?random=16" alt="独立游戏画面1" class="topic-image">
                            </div>
                            <div class="image-item">
                                <img src="https://picsum.photos/600/400?random=17" alt="独立游戏画面2" class="topic-image">
                            </div>
                            <div class="image-item">
                                <img src="https://picsum.photos/600/400?random=18" alt="独立游戏画面3" class="topic-image">
                            </div>
                        </div>
                    </div>
                    
                    <div class="topic-content">
                        <h3 class="topic-title">独立游戏精选：小团队的大创意</h3>
                        
                        <div class="topic-description">
                            精选15款优秀的独立游戏，这些游戏虽然没有大厂的资金支持，却凭借独特的创意和玩法赢得了玩家的喜爱。从解谜到角色扮演，从平台跳跃到模拟经营，类型丰富多样。
                        </div>
                        
                        <div class="topic-tags">
                            <span class="topic-tag">游戏</span>
                            <span class="topic-tag">独立游戏</span>
                            <span class="topic-tag">推荐</span>
                        </div>
                    </div>
                    
                    <div class="topic-stats">
                        <div class="stat-item">
                            <i class="far fa-comment"></i>
                            <span><strong>234</strong> 条评论</span>
                        </div>
                        <div class="stat-item">
                            <i class="far fa-share-square"></i>
                            <span><strong>128</strong> 次分享</span>
                        </div>
                    </div>
                    
                    <div class="topic-actions">
                        <div class="action-buttons">
                            <button class="btn-icon liked">
                                <i class="fas fa-heart"></i>
                                <span>567</span>
                            </button>
                            <button class="btn-icon">
                                <i class="far fa-comment"></i>
                                <span>评论</span>
                            </button>
                            <button class="btn-icon">
                                <i class="far fa-share-square"></i>
                                <span>分享</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // 点赞功能交互
        document.querySelectorAll('.btn-icon').forEach(btn => {
            btn.addEventListener('click', function(e) {
                e.preventDefault();
                
                // 点赞按钮交互
                if (this.querySelector('.fa-heart')) {
                    this.classList.toggle('liked');
                    const icon = this.querySelector('.fa-heart');
                    if (this.classList.contains('liked')) {
                        icon.classList.remove('far');
                        icon.classList.add('fas');
                    } else {
                        icon.classList.remove('fas');
                        icon.classList.add('far');
                    }
                }
                
                // 收藏按钮交互
                if (this.querySelector('.fa-bookmark')) {
                    this.classList.toggle('bookmarked');
                    const icon = this.querySelector('.fa-bookmark');
                    if (this.classList.contains('bookmarked')) {
                        icon.classList.remove('far');
                        icon.classList.add('fas');
                    } else {
                        icon.classList.remove('fas');
                        icon.classList.add('far');
                    }
                }
                
                // 分享按钮交互
                if (this.querySelector('.fa-share-square')) {
                    const topicTitle = this.closest('.topic-card').querySelector('.topic-title').textContent.trim();
                    alert(`分享专题: "${topicTitle}"`);
                }
                
                // 评论按钮交互
                if (this.querySelector('.fa-comment')) {
                    const topicTitle = this.closest('.topic-card').querySelector('.topic-title').textContent.trim();
                    alert(`评论专题: "${topicTitle}"`);
                }
            });
        });
        
        // 查看专题按钮交互
        document.querySelectorAll('.btn-primary').forEach(btn => {
            btn.addEventListener('click', function(e) {
                e.preventDefault();
                const topicTitle = this.closest('.topic-card').querySelector('.topic-title').textContent.trim();
                alert(`正在查看专题: "${topicTitle}"`);
            });
        });
    </script>
</body>
</html>
    
